<template>
    <div class="sub-info">
        <div class="sub-info-title">
            <div>
                <el-button
                        :disabled="id == -1 || !id"
                        type="primary"
                        @click="handleClick(edit)">
                    {{edit ? '保存' : '编辑'}}
                </el-button>
            </div>
        </div>
        <el-form
                label-position="left"
                ref="form"
                :model="form"
                label-width="80px"
                class="resume-form">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="兴趣爱好" prop="interest">
                        <el-input
                                type="textarea"
                                placeholder="请输入兴趣爱好"
                                v-model="form.interest"
                                :disabled="!edit"
                                maxlength="500"
                                show-word-limit
                                rows="6"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="自我评价" prop="evaluation">
                        <el-input
                                type="textarea"
                                placeholder="请输入自我评价"
                                v-model="form.evaluation"
                                :disabled="!edit"
                                maxlength="500"
                                show-word-limit
                                rows="6"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        props: ['id','basicForm','hobbyFlag'],
        components: {

        },
        data() {
            return {
                edit: false,
                form: {
                    id: '',
                    interest:'',
                    evaluation: ''
                }
            };
        },
        methods: {
            handleClick(edit) {
                if(edit) {
                    let temp = JSON.parse(JSON.stringify(this.form));
                    this.id ? temp.id = this.id : '';
                    console.log(temp)
                    this.$emit('updateResume',temp,3,3)
                    //  setTimeout(()=>{
                    //             if(this.hobbyFlag){
                    //                 this.edit = !this.edit;
                    //             }
                    //         },0)
                    // if(this.hobbyFlag){
                        this.edit = !this.edit;
                    // }
                } else {
                    this.edit = !this.edit;
                }

            }
        },
        watch:{
            'hobbyFlag':{
                handler(newName,oldName){
                    this.edit = !newName;
                }
            }
        },
        created(){
            if(this.basicForm) {
                for(let a in this.form) {
                    for( let b in this.basicForm) {
                        if(a == b && this.basicForm[b] ) {
                            this.form[a] =  this.basicForm[b];
                        }
                    }
                }
            }
        }
    };
</script>
<style lang="css" scoped>
    .sub-info {
        background: #ffffff;
        height: 380px;
    }
    .sub-info-title {
        display: flex;
        justify-content: flex-end;
        padding: 0 44px;
        background: #ffffff;
        height: 62px;
        align-items: center;
    }
    .sub-info-title div {
        width: 75px;
        display: flex;
    }

    .sub-info-title .el-button {
        padding: 0;
        width:94px;
        height:24px;
        line-height: 24px;
        box-sizing: border-box;
        background: #1893FC;
    }
    .sub-info-title .delete-btn {
        background: #ffffff;
        border-color: #1893FC;
        color: #1893FC;
    }
    .resume-form {
        padding: 0 58px;
    }
    .el-row>.el-col-12:last-child {
        display: flex;
        justify-content: flex-end;
    }
    .bar {
        padding-left: 10px;
    }
    .add-style {
        color: #ffffff;
        width: 13px;
        height: 13px;
        background: #1893FC;
        text-align: center;
        line-height: 13px;
        border-radius: 50%;
        margin-left: 14px;
        margin-top: 5px;
        cursor: pointer;
    }
</style>
